Skip to content

oMullerr/Lucrato

BranchesTags

Repository files navigation

📦 Lucrato

Sistema de gestão de compras, vendas e estoque para vendedores do Mercado Livre (e outros marketplaces). Construído em Angular 18 + Material, com tema light/dark, gráficos interativos e sincronização em tempo real via Firebase.

Angular Material TypeScript Firebase

🎯 Funcionalidades

  • 📦 Estoque — visão executiva com KPIs, status de cada lote, alertas visuais (amarelo ≥25 dias, vermelho ≥30 dias).
  • 🛒 Compras — cadastro de lotes com cálculo automático de custo total real (custo + frete + outros).
  • 💰 Vendas — registro de cada venda individual, com taxa ML customizável por venda, suporte a envio Correios e Flex, vínculo ao lote via ID e cálculo de lucro/margem em tempo real.
  • 📈 Dashboard — gráficos de evolução mensal, ranking de produtos, composição da receita e capital parado.
  • 📊 Análises — resumos por produto, categoria e mês com tabelas detalhadas.
  • ⚙️ Configurações — taxa padrão, margem mínima, dias de alerta, listas editáveis.
  • 🌗 Light/Dark mode com persistência e detecção da preferência do sistema.
  • 💾 Backup — exportação e importação de dados em JSON.
  • 🔐 Login por usuário — cada loja tem seus próprios dados isolados via Firebase Auth.
  • ☁️ Sincronização automática — dados salvos no Firestore, acessíveis em qualquer dispositivo.
  • 📱 Responsivo — funciona em desktop, tablet e mobile.

🚀 Como rodar

Pré-requisitos

  • Node.js 18.19+ ou 20.11+
  • npm 9+
  • Projeto Firebase configurado (veja a seção abaixo)

Instalação e execução

# 1. Instale as dependências
npm install

# 2. Configure o Firebase (preencha src/environments/environment.ts)

# 3. Rode em modo desenvolvimento
npm start
# Abre em http://localhost:4200

# 4. Build de produção
npm run build
# Gera os arquivos em dist/ml-gestao/browser

🛠️ Stack

🔥 Configuração do Firebase

Este guia explica como conectar o Lucrato ao seu projeto Firebase para habilitar sincronização em tempo real e login de usuários.

O que você vai precisar

  • Conta Google (gmail.com ou similar)
  • Node.js 18+ instalado
  • Projeto clonado e dependências instaladas (npm install)

Passo 1 — Criar o projeto no Firebase

  1. Acesse console.firebase.google.com
  2. Clique em "Adicionar projeto"
  3. Escolha um nome (ex: lucrato-minha-loja)
  4. Desative o Google Analytics (opcional) e clique em Criar projeto
  5. Aguarde a criação e clique em Continuar

Passo 2 — Registrar o app Web

  1. Na tela inicial do projeto, clique no ícone </> (Web)
  2. Dê um apelido ao app (ex: lucrato-web) — não marque "Firebase Hosting"
  3. Clique em Registrar app
  4. O Firebase vai exibir um bloco de código com firebaseConfig. Copie esses valores — você vai precisar deles no Passo 5:
const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "meu-projeto.firebaseapp.com",
  projectId: "meu-projeto",
  storageBucket: "meu-projeto.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};
  1. Clique em Continuar no console

Passo 3 — Ativar autenticação por E-mail/Senha

  1. No menu lateral do Firebase, clique em Authentication
  2. Clique na aba "Sign-in method"
  3. Clique em "E-mail/senha"
  4. Ative o primeiro interruptor (E-mail/senha) e clique em Salvar

Passo 4 — Criar o banco de dados Firestore

  1. No menu lateral, clique em Firestore Database
  2. Clique em "Criar banco de dados"
  3. Escolha "Começar no modo de produção" e clique em Avançar
  4. Selecione a região mais próxima (ex: southamerica-east1 para São Paulo) e clique em Ativar
  5. Aguarde a criação do banco

Configurar as regras de segurança

As regras restritivas já estão versionadas em firestore.rules na raiz do projeto. Use o Firebase CLI para publicá-las (não cole manualmente no console):

npx firebase-tools login                                           # 1ª vez
npx firebase-tools deploy --only firestore:rules --project lucrato-web

As regras restringem cada usuário ao seu próprio subtree e exigem e-mail verificado. Sem este deploy, qualquer pessoa autenticada poderia acessar dados de outros usuários.

Passo 5 — Configurar o app com suas credenciais

  1. Abra o arquivo src/environments/environment.ts no projeto
  2. Substitua os valores placeholder pelos que você copiou no Passo 2:
export const environment = {
  production: false,
  firebase: {
    apiKey: 'AIzaSy...',
    authDomain: 'meu-projeto.firebaseapp.com',
    projectId: 'meu-projeto',
    storageBucket: 'meu-projeto.appspot.com',
    messagingSenderId: '123456789',
    appId: '1:123456789:web:abc123',
  },
};
  1. Faça o mesmo no arquivo src/environments/environment.prod.ts

Passo 6 — Executar o app

npm start

Abra http://localhost:4200 no navegador.

  • Na primeira vez, você verá a tela de Login
  • Clique em "Criar conta" para registrar seu e-mail, senha e nome da loja
  • Após o cadastro, você será redirecionado para o Estoque
  • Os dados são salvos automaticamente no Firestore e sincronizados em todos os dispositivos

Passo 7 — Habilitar App Check (reCAPTCHA Enterprise)

App Check bloqueia chamadas à API Firestore que não venham do seu domínio autorizado, protegendo contra bots e abuso de cota mesmo se a API key vazar.

  1. No Firebase Console → projeto → App Check → registrar a app web
  2. Escolher provider reCAPTCHA Enterprise
  3. Em console.cloud.google.com → Security → reCAPTCHA Enterprise, criar uma chave para:
    • localhost (dev)
    • domínio de produção (ex.: lucrato-web.vercel.app)
  4. Copiar o site key (público) e colar nos environments:
  5. Em Firebase Console → App Check → APIs → Cloud Firestore, ativar Enforce quando estiver confiante (recomendado: rodar uma semana em "unenforced" primeiro pra ver métricas)

Debug token (dev local): main.ts habilita FIREBASE_APPCHECK_DEBUG_TOKEN automaticamente. Na primeira execução npm start, o console do navegador mostrará um token — copie e registre em Firebase Console → App Check → Apps → ⋯ → Manage debug tokens, senão chamadas locais falharão depois do Enforce.

Estrutura dos dados no Firestore

Cada usuário tem um documento exclusivo no caminho:

users/{uid}/db/main

Build de produção

npm run build

Os arquivos gerados ficam em dist/. Podem ser hospedados em qualquer servidor estático (Firebase Hosting, Netlify, Vercel, etc.).

Deploy com Firebase Hosting (opcional)

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy

Segurança

A aplicação implementa defesa em profundidade nas seguintes camadas:

Camada Onde
Firestore Rules: isolamento por UID + email_verified + validação de formato/tamanho + deny-all firestore.rules
App Check (reCAPTCHA Enterprise) src/app/app.config.ts
HTTP security headers (CSP, HSTS, X-Frame, nosniff, Referrer, Permissions) vercel.json
Verificação de e-mail obrigatória (guard + rules) src/app/core/guards/auth.guard.ts
Política de senha forte (8+ chars, letra+número) src/app/core/services/password-validator.ts
Forgot password (sem enumeração de contas) src/app/features/auth/forgot-password.dialog.ts
Re-autenticação antes de trocar senha / excluir conta src/app/features/profile/profile.component.ts
Limites de upload XLSX (5 MB, 5000 linhas/aba, extensão) src/app/features/settings/settings.component.ts
Leitura de planilha pela build corrigida do SheetJS (xlsx 0.20.x) src/app/core/services/import.service.ts
Logs detalhados desligados em produção src/app/core/services/logger.ts

🛡️ Operações de segurança no console (checklist)

Algumas proteções não vivem no código — precisam ser ativadas nos consoles do Firebase / Google Cloud. Faça este checklist no setup e revise periodicamente:

  • App Check em "Enforce" — Firebase Console → App Check → Cloud Firestore → Enforce. Rode ~1 semana em "unenforced" primeiro para conferir métricas.
  • Proteção contra enumeração de e-mail — Firebase Console → Authentication → Settings → Email enumeration protection (ativar). Impede descobrir quais e-mails têm conta pelo cadastro.
  • Restringir a API key Web — Google Cloud Console → APIs & Services → Credentials → a Browser key → Application restrictions = HTTP referrers (localhost + domínio de produção) e API restrictions = só as APIs usadas (Identity Toolkit, Cloud Firestore, App Check, Firebase Installations). A apiKey no environment.ts é pública por design, mas a restrição impede reuso/abuso de cota a partir de outros domínios.
  • Backups do Firestore — Firebase Console → Firestore → Point-in-time recovery (ativar) e/ou agendar exports para um bucket GCS. Recupera dados após exclusão acidental ou maliciosa.
  • Publicar as Firestore Rules após qualquer alteração: npx firebase-tools deploy --only firestore:rules --project lucrato-web — teste antes no Rules Playground / emulador para não bloquear gravações legítimas.

Notas técnicas

  • CSP / unsafe-inline em estilos: a diretiva style-src permite 'unsafe-inline' porque o Angular Material injeta estilos inline (necessário). Os scripts não permitem unsafe-inline/unsafe-eval (apenas wasm-unsafe-eval), mantendo a proteção anti-XSS importante. Se algum recurso bloquear em produção, abra DevTools → Console no domínio Vercel e ajuste a diretiva correspondente em vercel.json.
  • Parser de planilha: a leitura de arquivos enviados usa a build oficial corrigida do SheetJS, instalada a partir do CDN deles (o registro npm está congelado numa versão vulnerável — CVE-2023-30533 / CVE-2024-22363). Para reproduzir o ambiente após um clone limpo: npm install --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz. O xlsx-js-style permanece apenas para gerar planilhas estilizadas (a escrita não processa entrada não-confiável).

TODO

  • Revisar textos e labels
  • Revisar codigo
  • Revisar texto de instruções
  • Redistribuir o codigo (html so com html, css so com css e ts so com ts)
  • Ler como ficou o texto das instruções
  • Rever calculos da aplicação

BUGS

  • mais idiomas (i18n)

About

lucrato.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages